<script setup lang="ts">
import { type FormInstance, Message } from '@arco-design/web-vue'
import { useForm } from '@/hooks'
import { ConfigApi } from '@/apis'
import { useAppStore } from '@/stores'

const category = 'wechat'
const loading = ref(false)
const readonly = ref(true)
const config = ref()
const formRef = ref<FormInstance>()

const { form } = useForm({
  'wechat.parentAppId': '',
  'wechat.parentAppSecret': '',
  'wechat.employeeAppId': '',
  'wechat.employeeAppSecret': '',

  'wechat.corpId': '',
  'wechat.corpSecret': '',
  'wechat.corpAgentId': '',
  'wechat.corpToken': '',
  'wechat.corpAesKey': '',
})

const rules: FormInstance['rules'] = {
  // 'website.title': [{ required: true, match: Regexp.Name, message: '名称只能含有中文、数字、英文、下划线、短横线，长度为2-32位' }],
}

// 重置
const reset = () => {
  formRef.value?.resetFields()
  for (const key in form) {
    form[key] = config.value?.[key]
  }
}

// 编辑
const onEdit = () => {
  readonly.value = false
}

// 取消
const onCancel = () => {
  readonly.value = true
  reset()
}

// 保存
const onSave = async () => {
  const isInvalid = await formRef.value?.validate()
  if (isInvalid) {
    return false
  }

  await ConfigApi.updateConfigMap(form)
  Message.success('修改成功')
  useAppStore().initWebsiteConfig()
  readonly.value = true
}

// 查询详情
const getConfig = async () => {
  loading.value = true
  ConfigApi.listMapByCategory(category).then((res) => {
    config.value = res
    reset()
  }).finally(() => {
    loading.value = false
  })
}

onMounted(async () => {
  getConfig()
})
</script>

<template>
  <a-form ref="formRef" layout="vertical" :model="form" :rules :readonly>
    <a-card :loading class="section" title="家长端小程序配置">
      <template #extra>
        <ReadonlyEditButton
          :readonly="readonly"
          :deleteable="false"
          @edit="onEdit"
          @cancel="onCancel"
          @save="onSave"
        />
      </template>
      <a-row :gutter="32">
        <readonly-form-item label="appId" field="'wechat.parentAppId'" :span="12">
          <a-input v-model.trim="form['wechat.parentAppId']" />
        </readonly-form-item>
        <readonly-form-item label="appSecret" field="'wechat.parentAppSecret'" :span="12">
          <a-input v-model.trim="form['wechat.parentAppSecret']" />
        </readonly-form-item>
      </a-row>
    </a-card>

    <a-card :loading class="section" title="教师端小程序配置">
      <a-row :gutter="32">
        <readonly-form-item label="appId" field="'wechat.employeeAppId'" :span="12">
          <a-input v-model.trim="form['wechat.employeeAppId']" />
        </readonly-form-item>
        <readonly-form-item label="appSecret" field="'wechat.employeeAppSecret'" :span="12">
          <a-input v-model.trim="form['wechat.employeeAppSecret']" />
        </readonly-form-item>
      </a-row>
    </a-card>

    <a-card :loading class="section" title="企业微信配置">
      <a-row :gutter="32">
        <readonly-form-item label="corpId" field="'wechat.corpId'" :span="12">
          <a-input v-model.trim="form['wechat.corpId']" />
        </readonly-form-item>
        <readonly-form-item label="corpSecret" field="'wechat.corpSecret'" :span="12">
          <a-input v-model.trim="form['wechat.corpSecret']" />
        </readonly-form-item>
        <readonly-form-item label="agentId" field="'wechat.corpAgentId'" :span="12">
          <a-input v-model.trim="form['wechat.corpAgentId']" />
        </readonly-form-item>
        <readonly-form-item label="token" field="'wechat.corpToken'" :span="12">
          <a-input v-model.trim="form['wechat.corpToken']" />
        </readonly-form-item>
        <readonly-form-item label="aesKey" field="'wechat.corpAesKey'" :span="12">
          <a-input v-model.trim="form['wechat.corpAesKey']" />
        </readonly-form-item>
      </a-row>
    </a-card>
  </a-form>
</template>

<style lang="less" scoped>

</style>
